<template>
  <view class="diy-tabbar">
    <slot />
    <view class="navigation-format0" v-if="tabbarIsShow">
      <view
        v-for="(item, index) in diyTabbarList"
        class="navigation-format0-item"
        @click="navigatorTo(item, index)"
        :key="index"
      >
        <view :class="['iconfont', item.icon, item.isSelect ? 'select-icon' : '']"></view>
        <view class="text">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabbarIsShow: {
      type: Boolean,
      default: false
    }
  },
  name: "DiyTabbar",
  data() {
    return {
      current: 0,
      list: []
    };
  },
  computed: {
    diyTabbarList: {
      get() {
        return this.$store.state.diyTabbarList;
      },
      set(val) {
        this.$store.commit("tabbarChange", ...val);
      }
    }
  },
  methods: {
    navigatorTo(e) {
      this.diyTabbarList = this.diyTabbarList.map(item => {
        item.isSelect = false;
        return item;
      });
      e.isSelect = true;
      uni.redirectTo({
        url: e.link
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.navigation-format0 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 24rpx 0;
  box-sizing: border-box;
  border: 2rpx solid #e4e6f4;
  z-index: 2;
  // ios底部安全距离
  // padding-bottom: calc(-30rpx + env(safe-area-inset-bottom));
  .navigation-format0-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    .icon {
      width: 24rpx;
      height: 24rpx;
      text-align: center;
    }
    .iconfont {
      font-size: 44rpx;
    }
    .select-icon {
      color: #eea9c9;
    }
    .text {
      margin-top: 14rpx;
      font-size: 36rpx;
      transform: translate3d(1%, 1%, 0) scale(0.5);
      text-align: center;
      font-weight: bold;
      line-height: 24rpx;
      color: #b4bac6;
    }
    &.active {
      .text {
        color: black;
      }
    }
  }
}
</style>
